<template>
    <div style="width: 100%; height: 100vh;background-color: darkslateblue; overflow: hidden;">
        <div style="width: 400px; margin: 150px auto;">
            <div style="color: aliceblue;font-size: 30px;text-align: center;padding: 30px;">欢迎登录</div>
            
            <el-form :model="form"  ref="form">
                <el-form-item prop="username">
                    <el-input  v-model="form.username" >
                        <template #prepend>用户名</template>
                    </el-input>
                </el-form-item>

                <el-form-item prop="password">
                    <el-input v-model="form.password" show-password>
                        <template #prepend>密码</template>
                    </el-input>
                </el-form-item>

                <el-form-item >
                    <el-button style="width: 100% " type ="primary" @click="login">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import request from '@/utils/request';

export default {
    name: "Login",
    data() {
        return {
            form: {}
        }
    },
    created(){
        sessionStorage.removeItem("user")
    },
    methods: {
        login() {
            request.post("/user/login",this.form).then(res => {
                if (res.code == "0"){
                    this.$message({
                            type:"success",
                            message:"登录成功"
                        })
                     //缓存登录信息
                    sessionStorage.setItem("user",JSON.stringify(res.data))
                    this.$router.push("/")
                } else {
                    this.$message({
                            type:"fail",
                            message: res.msg
                        })
                }
            })
        }
    }
}
</script>